<template>
  <div>
    <canvas id="canvas"></canvas>

    <div>
      <img ref="conf0" src="../../assets/logo.png" />
    </div>
  </div>
</template>

<script>
let canvas;
let ctx;
export default {
  mounted() {
    this.initCanvas();
    // 当调整窗口大小时重绘canvas
    window.onresize = () => {
      this.initCanvas();
    };
  },
  methods: {
    initCanvas() {
      console.log("初始化canvas");
      canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");

      var img = this.$refs.conf0;
      img.onload = () => {
        ctx.drawImage(img, 10, 10,150,100);
      };
      //   this.drawSmile();
    },
    // drawSmile() {
    //   ctx.beginPath();
    //   ctx.arc(75, 20, 45, 0, Math.PI * 2, true); // 绘制
    //   ctx.moveTo(95, 55);
    //   ctx.arc(50, 50, 25, 0, Math.PI, false); // 口(顺时针)
    //   ctx.moveTo(65, 65);
    //   ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
    //   ctx.moveTo(95, 65);
    //   ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
    //   ctx.stroke();
    // },
  },
};
</script>

<style scoped>
#canvas {
  border: 1px solid rgb(199, 198, 198);
  width: 500px;
  height: 500px;
}
</style>